<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上机</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
</head>

<body>

    <div id="app">
        <input type="text" v-model="inputUpdate" />
        <button>点击</button>

        <table v-for="(item, index) in newsList" :key="index">
            <tr>
                <td v-text="item.title"></td>
                
                
                <td v-text="item.content"></td>
            </tr>
        </table>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                inputUpdate: "",
                newsList: []

            },
            methods: {
                newsListFunction() {
                    let a = this;
                    axios.get("js/newListJson.json").then(reson => {
                        a.newsList = reson.data;

                        // console.log(a.newsList)
                    })
                }
            },
            // beforeCreadted
            beforeCreate() {
                console.log("进入beforeCreate")
            },
            created() {
                this.newsListFunction();
                console.log("进入created")
            },
            beforeMount() {
                console.log("进入beforeMount")
            },
            mounted() {
                console.log("进入mounted")
            },
            beforeUpdate() {
                console.log("进入beforeUpdate")
            },
            updated() {
                console.log("进入updated")
            },
            beforeDestroy() {
                console.log("进入beforeDestroy")
            },
            destroyed() {
                console.log("进入destroyed")
            },
        })
    </script>
</body>

</html>